<template>
  <view class="access-container">
    <view class="header">
      <view class="header-content">
        <text class="title">园区门禁</text>
        <text class="subtitle">便捷通行，安全无忧</text>
      </view>
    </view>
    
    <view class="card">
      <view class="section-title">
        <text>快速开门</text>
      </view>
      
      <view class="door-options">
        <view class="door-option" @tap="scanQrCode">
          <view class="icon-wrapper">
            <image src="/static/icons/scan.png"></image>
            <view class="pulse-ring"></view>
          </view>
          <text class="option-text">扫码开门</text>
          <text class="hint-text">点击扫描门禁二维码</text>
        </view>
      </view>
      
      <view class="section-title recent-title">
        <text>最近开门记录</text>
        <!-- <text class="view-all" @tap="viewAllRecords">查看全部</text> -->
      </view>
      
      <view class="records-list">
        <view class="record-item" v-for="(record, index) in recentRecords" :key="index">
          <view class="record-info">
            <text class="door-name">{{record.doorName}}</text>
            <text class="time">{{record.time}}</text>
          </view>
          <text class="status" :class="record.success ? 'success' : 'failed'">
            {{record.success ? '开门成功' : '开门失败'}}
          </text>
        </view>
      </view>
    </view>
    
    <view class="card help-card">
      <view class="section-title">
        <text>使用帮助</text>
      </view>
      <view class="help-content">
        <text class="help-text">扫码开门功能旨在为园区居民提供一种安全而便捷的方式，以通过手机小程序直接控制门禁系统。此功能特别适用于忘记携带门禁卡或手上拿满物品时无法方便掏卡的情况。</text>
        <view class="help-item">
          <text class="help-item-title">如何使用：</text>
          <text class="help-item-text">1. 点击"扫码开门"按钮</text>
          <text class="help-item-text">2. 对准门禁处的二维码进行扫描</text>
          <text class="help-item-text">3. 等待系统验证并开门</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recentRecords: [
        { doorName: '小区南门', time: '2025-03-15 08:32', success: true },
        { doorName: '1号楼大堂', time: '2025-03-14 19:45', success: true },
        { doorName: '地下车库入口', time: '2025-03-13 20:12', success: false }
      ]
    }
  },
  methods: {
    scanQrCode() {
      uni.scanCode({
        success: (res) => {
          // 处理扫码结果
          console.log('扫码结果：', res);
          // 这里应该发送请求到后端验证并开门
          this.mockOpenDoor();
        },
        fail: (err) => {
          console.error('扫码失败：', err);
          uni.showToast({
            title: '扫码失败，请重试',
            icon: 'none'
          });
        }
      });
    },
    mockOpenDoor() {
      uni.showLoading({
        title: '正在开门...'
      });
      
      // 模拟开门请求
      setTimeout(() => {
        uni.hideLoading();
        
        // 随机模拟成功或失败
        const success = Math.random() > 0.2;
        
        if (success) {
          uni.showToast({
            title: '开门成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: '开门失败，请重试',
            icon: 'none'
          });
        }
        
        // 添加开门记录
        this.addRecord('1号楼大堂', success);
      }, 1500);
    },
    addRecord(doorName, success) {
      // 获取当前时间
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      
      const timeStr = `${year}-${month}-${day} ${hours}:${minutes}`;
      
      // 添加新记录到列表开头
      this.recentRecords.unshift({
        doorName,
        time: timeStr,
        success
      });
      
      // 保持列表不超过5条记录
      if (this.recentRecords.length > 5) {
        this.recentRecords.pop();
      }
    },
    viewAllRecords() {
      uni.navigateTo({
        url: '/pages/access/records'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.access-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 30rpx;
}

.header {
  position: relative;
  height: 300rpx;
  overflow: hidden;
  background: linear-gradient(135deg, #4a0991, #6a11cb, #9d41ff);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15), transparent 60%);
    z-index: 1;
  }
  
  .header-content {
    position: relative;
    z-index: 2;
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    }
    
    .subtitle {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

.card {
  margin: -50rpx 30rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 3;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  
  text {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .view-all {
    font-size: 26rpx;
    color: #6a11cb;
    font-weight: normal;
  }
}

.recent-title {
  margin-top: 40rpx;
}

.door-options {
  display: flex;
  justify-content: center;
  margin: 20rpx 0 40rpx;
  
  .door-option {
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
    background-color: #ffffff;
    border-radius: 24rpx;
    transition: all 0.25s ease;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.03);
    }
    
    .icon-wrapper {
      position: relative;
      margin-bottom: 24rpx;
      padding: 24rpx;
      background-color: #f8f2ff;
      border-radius: 20rpx;
      
      image {
        width: 80rpx;
        height: 80rpx;
        position: relative;
        z-index: 2;
      }
      
      .pulse-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border: 2rpx solid rgba(106, 17, 203, 0.1);
        border-radius: 20rpx;
        animation: pulseFlat 2s infinite;
        
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: calc(100% + 20rpx);
          height: calc(100% + 20rpx);
          border: 2rpx solid rgba(106, 17, 203, 0.05);
          border-radius: 24rpx;
          animation: pulseFlat 2s infinite 0.3s;
        }
      }
    }
    
    .option-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 12rpx;
    }
    
    .hint-text {
      font-size: 24rpx;
      color: #999999;
      letter-spacing: 0.5rpx;
    }
  }
}

@keyframes pulseFlat {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.6;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
  }
}

.records-list {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-info {
      display: flex;
      flex-direction: column;
      
      .door-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
      }
      
      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .status {
      font-size: 26rpx;
      
      &.success {
        color: #07c160;
      }
      
      &.failed {
        color: #fa5151;
      }
    }
  }
}

.help-card {
  margin-top: 20rpx;
  
  .help-content {
    .help-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }
    
    .help-item {
      margin-top: 20rpx;
      
      .help-item-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .help-item-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        display: block;
        margin-bottom: 8rpx;
      }
    }
  }
}
</style> 